<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no"
    />
    <link
      rel="stylesheet"
      href="./src/bridge-h5/static/iconfont/iconfont.css"
    />
    <link
      rel="stylesheet"
      href="https://openlayers.org/en/v4.6.5/css/ol.css"
      type="text/css"
    />
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <script src="/watermark.js"></script>
    <!-- <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.4&key=b5105611e8703569bd5793487e635923"
    ></script> -->
    <!-- <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> -->
    <title></title>
    <style>
      html,
      body,
      #app {
        width: 100vw;
        /* height: 100vh; */
        height: calc(100vh - 120px);
        margin: 0px;
        padding: 0px;
        background: #f5f5f5;
      }
      /* 引入第三方或自定义的字体图标样式 */
      @font-face {
        font-family: 'my-icon';
        src: url('./src/bridge-h5/static/iconfont/iconfont.ttf')
          format('truetype');
      }

      .my-icon {
        font-family: 'my-icon';
        font-style: normal;
      }
      .my-icon-home::before {
        content: '\e625';
      }
      .my-icon-bridge::before {
        content: '\e62b';
      }
      .my-icon-channel::before {
        content: '\e62c';
      }
      .my-icon-ship::before {
        content: '\e629';
      }
      .my-icon-dianhua::before {
        content: '\e613';
      }
      .my-icon-duanxin::before {
        content: '\e654';
      }
    </style>
    <style type="text/css">
      /* 去除高德地图的logo */
      .amap-logo {
        display: none;
        opacity: 0 !important;
      }
      .amap-copyright {
        opacity: 0;
      }
      .amap-zoom-touch-plus > div,
      .amap-zoom-touch-minus > div {
        color: #266fe8;
      }
      .amap-touch-toolbar .amap-zoomcontrol {
        border-radius: 8px 8px 8px 8px;
        width: 42px;
        height: 96px;
        border: none;
        background: #fff;
        bottom: -58px;
      }
      .amap-icon {
        overflow: inherit !important;
      }
    </style>
    <style type="text/css">
      .ol-zoom {
        top: 74%;
        width: 42px;
        height: 96px;
        left: 16px;
        border-radius: 8px 8px 8px 8px;
        border: none;
        margin: 0;
        padding: 0;
        font-size: 16px;
      }
      .ol-zoom .ol-zoom-in {
        position: relative;
        height: 50%;
        background: #ffffff;
        width: 100%;
        border-radius: 8px 8px 0 0;
        color: #266fe8;
      }
      .ol-zoom .ol-zoom-out {
        position: relative;
        height: 50%;
        background: #ffffff;
        width: 100%;
        border-radius: 0 0 8px 8px;
        color: #266fe8;
      }
      .ol-zoom .ol-zoom-in::after {
        content: '';
        width: 34px;
        height: 1px;
        opacity: 1;
        background: rgba(38, 111, 232, 0.1);
        position: absolute;
        bottom: 0;
        left: 4px;
      }
      .ol-control button:hover {
        background-color: #fff;
      }
      .ol-attribution {
        display: none;
      }
      .ol-rotate {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
